<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>主页-我的社区</title>

		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href=" ../css/sm.min.css">
		<link rel="stylesheet" href=" ../css/sm-extend.min.css">
		<link rel="stylesheet" href=" ../css/iconfont.css">
		<link rel="stylesheet" href="../css/forum-addTopic.css">
		<script src='../js/vue.js'></script>
		<script src='../js/axios.min.js'></script>
		<script src='../js/jquery-3.2.1.min.js'></script>
		<script src="../js/config.js"></script>
		<style type="text/css">
			#index {
				margin-top: 0.4rem;

			}

			/* 卡片内容加边距 */
			.my-cont {
				padding: .2rem .75rem;
			}

			/* 单张照片 */
			.my-cont .c1 img {
				width: 60%;
				margin: 0.5rem 0;
			}
			
			/* 两张照片 */
			.my-cont .c2 img {
				width: 40%;
				margin: 0.5rem 5%;
			}
			
			/* 三张照片及以上 */
			.my-cont .c3 img {
				width: 32%;
				margin: 0.5rem 0;
			}
			/* 用户动态信息上限 */
			.userMes{
				max-height: 3rem;
				overflow: hidden;
				font-size: 0.7rem;
			}

			/* 背景色白色 */
			.page,
			.page-group {
				background-color: white;
			}

			/* 卡片主内容左右边距 */
			.my-data {
				padding-right: 7rem;
			}

			/* 去掉卡片边距 */
			.card {
				margin: 0;
			}

			.page {
				/* margin: 0.2rem; */
			}

			/* 用户字体 */
			.list-block .my-user {
				font-size: 0.6rem;
				color: rgb(150, 150, 150);
			}
			.list-block .media-list .item-title{
				font-size: 0.7rem;
				font-weight: 700;
			}

			/* 头像圆角 */
			.my-photo img {
				border-radius: 0.65rem;
			}

			/* 用户名称 */
			.my-username {
				font-size: 0.65rem;
				color: rgb(8, 148, 236);
			}

			/* 卡片下划线 */
			.my-data{
				position: static;
				border-bottom:1px solid rgb(220,220,220);
			}
			/* 消除无线滚动顶部间距 */
			.list-block {
			    margin-top:0rem;
			}
			a{
				color: inherit;
			}
			a:active{
				color: inherit;
			}
			/* 赞，回复数字 */
			.numType{
				font-size: 0.7rem;
				padding-right: 0.2rem;
				position: relative;
				top: 0.1rem;
			}
		</style>
		<style type="text/css">
			.infinite-scroll-preloader {
				margin-top: -20px;
			}
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page">
			<!-- 工具栏 -->
			<nav class="bar bar-tab">
				<a class="tab-item external active" href="#">
					<!-- <span class="icon icon-home"></span> -->
					<span class="icon iconfont icon-Moneymanagement"></span>
					<span class="tab-label">动态</span>
				</a>
				<a class="tab-item external" href="forum-community.html">
					<span class="icon iconfont icon-chengshi"></span>
					<span class="tab-label">社区</span>
				</a>
				<a class="open-popup tab-item external" href="#" data-popup=".popup-addTopic">
					<span class="icon iconfont icon-chuangzuo"></span>
					<span class="tab-label">发布</span>
				</a>
				<a class="tab-item external" href="forum-mes.html">
					<span class="icon iconfont icon-message"></span>
					<span class="tab-label">消息</span>
				</a>
				<a class="tab-item external" href="forum-user-centre.html?userId=null">
					<span class="icon iconfont icon-peoplelist"></span>
					<span class="tab-label">我的</span>
				</a>
			</nav>

			<!-- 这里是页面内容区 -->
			<div class="content">
				<!-- 顶部搜索栏 -->
				<!-- <div class="my-top">
					<a id="index" class="button button-link button-nav pull-left" href="index.html">
						<span class="icon iconfont icon-home_light"></span>
						返回
					</a>
					<div class="searchbar row">
						<div class="search-input col-80">
							<input type="search" id='search' placeholder='输入关键字...' />
						</div>
						<a id="find" class="button button-fill button-primary col-15"><span class="icon icon-search"></span></a>
					</div>
				</div> -->
				<!-- 标题栏 -->
				<div class="buttons-tab fixed-tab" data-offset="0">
					<a href="forum-index.html" class="button">热议</a>
					<a href="forum-index-concern.html" class="button">关注</a>
					<a href="#" class="button active">我的社区</a>
				</div>
				<!-- 主内容 -->
				<div class="active infinite-scroll" data-distance="50">
					<div class="list-block">
						<div class="card list-container">
							<!-- 
							!-- 社区 --
							<div class="card-content">
								<div class="list-block media-list">
									<ul>
										<li class="item-content">
											<div class="item-media my-photo">
												<img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
												 width="35">
											</div>
											<div class="item-inner">
												<div class="item-title-row">
													<div class="item-title">清风社区</div>
												</div>
												<div class="item-subtitle my-user">用户：200w</div>
											</div>
										</li>
									</ul>
								</div>
							</div>
							!-- 内容 --
							<div class="my-cont">
								<span>
									<span class="my-username">@张三：</span>安达市大所大所多安达市大所大所多安达市安达市大所大所多安达市大所大所多安达市大所大所多安达市大所大所多<br>
								</span>
								<span class="c1">
									<img src="http://localhost:12317/img/joylife/10.jpg">
								</span>

							</div>
							<div class="card-footer my-data">
								<span>2015/01/15</span>
								<span>5
									<span class="icon iconfont icon-appreciate"></span>
								</span>
								<span>5
									<span class="icon iconfont icon-message"></span>
								</span>
							</div> -->
							
						</div>
					</div>
					<!-- 加载提示符 -->
					<div class="infinite-scroll-preloader">
						<div class="preloader"></div>
					</div>
				</div>
			</div>
		</div>
		<!-- 发布消息 -->
		<div class="popup popup-addTopic">
			<div class="content-block">
				<!-- 工具栏 -->
				<div class="addTopic-top row">
					<div class="t1 col-33">
						<span class="close-popup iconfont icon-fanhui"></span>
					</div>
					<div class="t2 col-33">
						<span>我的动态</span>
					</div>
					<div @click="addTopic" class="t3 col-33">
						<span>发布</span>
					</div>
				</div>
				<!-- 输入区域 -->
				<div id="addTopic-count" class="item-content list-block">
					<textarea id="topicContent" name="topicContent" maxlength="10000" required placeholder="尽情发挥吧..."></textarea>
				</div>
				<!-- 图片 -->
				<div id="addTopic-img" class="row">
					<div v-for="(item,index) in imgs" class="userImg col-33">
						<span @click="delImg(index)" class="imgDel iconfont icon-shanchu"></span>
						<img :src="imgSrc(item)">
					</div>
					<div v-if="imgs.length<3" class="userImg col-33">
						<!--  -->
						<form id="imgForm" method="post" enctype="multipart/form-data">
							<input type="file" @change="addImgMethod" id="addImg" name="img" accept="image/jpeg" />
						</form>
						<img src="../img/iconfont-tianjia.png">
					</div>
				</div>
			</div>
		</div>
		<script src='../js/sm.js'></script>
		<script src='../js/sm-extend.js'></script>
		<script src="../js/forum-addTopic.js"></script>
		<script type="text/javascript">
			//所有图片数据
			var allPhoto={};
			//当下图片浏览器数据
			var newphotos=new Array();
			$(function(){
			   $(document).on('click','.pb-popup',function () {
				 var myPhotoBrowserPopup = $.photoBrowser({
					   photos :newphotos,
					   type: 'popup'
				});
				myPhotoBrowserPopup.open();
			   });
			})
			/* 切换照片数组 */
			function changePhoto(id){
				newphotos=allPhoto[id];
				//console.log(newphotos);
			}
		</script>

		<script>
			// 加载flag
			var loading = false;
			// 最多可加载的条目
			var maxItems = 100;
			// 每次加载添加多少条目
			var itemsPerLoad = 5;
			// 初始页
			var lastIndex = 1;
			//查找
			var find="";
			// 生成新条目的HTML
			function addItems(topic) {
				var html = '<a href="forum-forum.html?forumId='+topic.forumForum.id+'"><div class="card-content">'
					+'<div class="list-block media-list">'
						+'<ul>'
							+'<li class="item-content">'
								+'<div class="item-media my-photo">'
									+'<a href="forum-forum.html?forumId='+topic.forumForum.id+'"><img src="'+topic.forumForum.photo+'" width="35" height="35">'
								+'</a></div>'
								+'<div class="item-inner">'
									+'<div class="item-title-row">'
										+'<div class="item-title">'+topic.forumForum.name+'</div>'
									+'</div>'
									+'<div class="item-subtitle my-user">用户:'+topic.concern+'</div>'
								+'</div>'
							+'</li>'
						+'</ul>'
					+'</div>'
				+'</div></a>'
				+'<div class="my-cont">'
					+'<span>'
						+'<a href="forum-Topic.html?topicId='+topic.forumTopic.id+'"><div class="userMes"><span class="my-username">@' + topic.centerUser.nickname + '：</span>' + topic.forumTopic.content + '</div></a>' 
					+'</span>';
					/* 判断照片数量 */
					if(topic.forumPhotos.length==1){
					html+='<span class="c1">'
						+'<img class=" pb-popup" onclick="changePhoto(\''+topic.forumTopic.id+'\')" src="'+topic.forumPhotos[0].photo+'">'
					+'</span>';
					}else if(topic.forumPhotos.length==2){
						html+='<span class="c2">'
							+'<img class=" pb-popup" onclick="changePhoto(\''+topic.forumTopic.id+'\')" src="'+topic.forumPhotos[0].photo+'">'
							+'<img class=" pb-popup" onclick="changePhoto(\''+topic.forumTopic.id+'\')" src="'+topic.forumPhotos[1].photo+'">'
						+'</span>';
					}else if(topic.forumPhotos.length==3){
						html+='<span class="c3">'
							+'<img class=" pb-popup" onclick="changePhoto(\''+topic.forumTopic.id+'\')" src="'+topic.forumPhotos[0].photo+'">'
							+'<img class=" pb-popup" onclick="changePhoto(\''+topic.forumTopic.id+'\')" src="'+topic.forumPhotos[1].photo+'">'
							+'<img class=" pb-popup" onclick="changePhoto(\''+topic.forumTopic.id+'\')" src="'+topic.forumPhotos[2].photo+'">'
						+'</span>';
					}
					//保存图片
					if(topic.forumPhotos!=null&&topic.forumPhotos.length!=0){
						var tempPhoto=new Array();
						$.each(topic.forumPhotos, function(i, item) {
							tempPhoto.push(item.photo);
						}); 
						//保存
						allPhoto[topic.forumTopic.id]=tempPhoto;
					}
				html += '</div>' +
					'<div class="card-footer my-data">';
				
				/* 判断日期时间 */
				var num = new Date().getTime() - Date.parse(topic.forumTopic.date);
				var date= new Date(Date.parse(topic.forumTopic.date));
				//一小时以内
				if (num < 3600000) {
					html += '<span class="numType">' + Math.ceil(num / 60000)  + '分钟前</span>';
				} else if(date.setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0)){
					//今天发送的
					html += '<span class="numType">' + topic.forumTopic.date.substring(11,16) + '</span>';
				} else {
					//之前的信息
					html += '<span class="numType">' + topic.forumTopic.date.substring(0,10) + '</span>';
				}
				
				html += '<span><span class="numType">' + topic.praiseNum +
					'</span><span onclick="alterPraise(this,\'' + topic.forumTopic.id +
					'\')"  class="';
					/* 点赞状态判断 */
						if(topic.status==1){
							html +='icon iconfont icon-appreciate_fill_light"></span>';
						}else{
							html +='icon iconfont icon-appreciate"></span>';
						}
						html +='</span>' +
						'<span><span class="numType">' + topic.replyNum +
						'</span><a href="forum-Topic.html?topicId='+topic.forumTopic.id+'"><span class="icon iconfont icon-message"></span></a>' +
						'</span>' +
						'</div>';
				
				
				// 添加新条目
				$('.infinite-scroll .list-container').append(html);
			}
			//异步请求封装
			function aja(){
				// 如果正在加载，则退出
				if (loading) return;
				// 设置flag
				loading = true;
				//判断url地址
				var url;
				if(find==""){
					url=serviceIP+"/forum/myForumTopic";
				}else{
					url=serviceIP+"/forum/search";
				}
				//认证状态监测
				var storage=window.localStorage;
				var token=storage.getItem("token");
				var refreshtoken=storage.getItem("refreshtoken");
				//请求加载信息
				$.ajax({
				        type: 'get',
				        url: url,
				        dataType: 'json',
						data:{
							page: lastIndex,
							limit: itemsPerLoad,
							find: find
						},
				        headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
				        success:function (data) {
						//判断是否认证社区
						if(data.code=="400"){
							$.toast("尚未认证社区！");
							// 加载完毕，则注销无限加载事件，以防不必要的加载
							$.detachInfiniteScroll($('.infinite-scroll'));
							// 删除加载提示符
							$('.infinite-scroll-preloader').remove();
							return;
						}
						// 重置加载flag
						loading = false;
						//页面遍历添加
						$.each(data.data.list,function(i,item){
							addItems(item);
						});
						// 更新最后加载的序号
						lastIndex++;
						//无数据
						if (data.data.size < itemsPerLoad) {
							// 删除加载提示符
							$('.infinite-scroll-preloader').remove();
						}
						if (data.data.size < 1) {
							// 加载完毕，则注销无限加载事件，以防不必要的加载
							$.detachInfiniteScroll($('.infinite-scroll'));
							// 删除加载提示符
							$('.infinite-scroll-preloader').remove();
							//提醒
							$.toast("没更多消息了，看看别的吧！");
							return;
						}
						//容器发生改变,如果是js滚动，需要刷新滚动
						$.refreshScroller();
				　　}
				}); 
			}
			aja();
			// 注册'infinite'事件处理函数
			$(document).on('infinite', function() {
				aja();
			});
			//搜索
			$("#find").click(function(){
				find=$("#search").val();
				lastIndex=1;
				$('.infinite-scroll .list-container').html("");
				$.attachInfiniteScroll($('.infinite-scroll'))
				aja();
			});
				
		</script>
		<script type="text/javascript">
			//话题赞状态更改
			function alterPraise(that,topicId) {
				$.ajax({
					type: 'get',
					url: serviceIP+"/forum/alterTopicPraise",
					dataType: 'json',
						data:{
							topicId: topicId
						},
					headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
					success:function (data) {
						if(data.status==1){
							$(that).prev().html($(that).prev().html() * 1 + 1 * 1);
							$(that).attr("class", "icon iconfont icon-appreciate_fill_light");
							$.toast("已赞！");
						}else if(data.status==0){
							$(that).prev().html($(that).prev().html() * 1 - 1 * 1);
							$(that).attr("class", "icon iconfont icon-appreciate");
							$.toast("取消赞！");
						}
					}});
			}
		</script>
		<script>
			$.init();
		</script>
	</body>

</html>
